<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>窗口拖拽（改变大小/最小化/最大化/还原/关闭）</title>
    <style type="text/css">
    body,
    div,
    h2 {
        margin: 0;
        padding: 0;
    }
    
    body {
        background: url(../../../src/images/tlbg.jpg);
        font: 12px/1.5 \5fae\8f6f\96c5\9ed1;
        color: #333;
    }
    
    #drag {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 300px;
        height: 160px;
        background: #e9e9e9;
        border: 1px solid #444;
        border-radius: 5px;
        box-shadow: 0 1px 3px 2px #666;
    }
    
    #drag .title {
        position: relative;
        height: 27px;
        margin: 5px;
    }
    
    #drag .title h2 {
        font-size: 14px;
        height: 27px;
        line-height: 24px;
        border-bottom: 1px solid #A1B4B0;
    }
    
    #drag .title div {
        position: absolute;
        height: 19px;
        top: 2px;
        right: 0;
    }
    
    #drag .title a,
    a.open {
        float: left;
        width: 21px;
        height: 19px;
        display: block;
        margin-left: 5px;
        background: url(../../../src/images/tool.png) no-repeat;
    }
    
    a.open {
        position: absolute;
        top: 10px;
        left: 50%;
        margin-left: -10px;
        background-position: 0 0;
    }
    
    a.open:hover {
        background-position: 0 -29px;
    }
    
    #drag .title a.min {
        background-position: -29px 0;
    }
    
    #drag .title a.min:hover {
        background-position: -29px -29px;
    }
    
    #drag .title a.max {
        background-position: -60px 0;
    }
    
    #drag .title a.max:hover {
        background-position: -60px -29px;
    }
    
    #drag .title a.revert {
        background-position: -149px 0;
        display: none;
    }
    
    #drag .title a.revert:hover {
        background-position: -149px -29px;
    }
    
    #drag .title a.close {
        background-position: -89px 0;
    }
    
    #drag .title a.close:hover {
        background-position: -89px -29px;
    }
    
    #drag .content {
        overflow: auto;
        margin: 0 5px;
    }
    
    #drag .resizeBR {
        position: absolute;
        width: 14px;
        height: 14px;
        right: 0;
        bottom: 0;
        overflow: hidden;
        cursor: nw-resize;
        background: url(../../../src/images/resize.png) no-repeat;
    }
    
    #drag .resizeL,
    #drag .resizeT,
    #drag .resizeR,
    #drag .resizeB,
    #drag .resizeLT,
    #drag .resizeTR,
    #drag .resizeLB {
        position: absolute;
        background: #000;
        overflow: hidden;
        opacity: 0;
        filter: alpha(opacity=0);
    }
    
    #drag .resizeL,
    #drag .resizeR {
        top: 0;
        width: 5px;
        height: 100%;
        cursor: w-resize;
    }
    
    #drag .resizeR {
        right: 0;
    }
    
    #drag .resizeT,
    #drag .resizeB {
        width: 100%;
        height: 5px;
        cursor: n-resize;
    }
    
    #drag .resizeT {
        top: 0;
    }
    
    #drag .resizeB {
        bottom: 0;
    }
    
    #drag .resizeLT,
    #drag .resizeTR,
    #drag .resizeLB {
        width: 8px;
        height: 8px;
        background: #FF0;
    }
    
    #drag .resizeLT {
        top: 0;
        left: 0;
        cursor: nw-resize;
    }
    
    #drag .resizeTR {
        top: 0;
        right: 0;
        cursor: ne-resize;
    }
    
    #drag .resizeLB {
        left: 0;
        bottom: 0;
        cursor: ne-resize;
    }
    </style>
    <script type="text/javascript">
    /*-------------------------- +
      获取id, class, tagName
     +-------------------------- */
    var get = {
        byId: function(id) {
            return typeof id === "string" ? document.getElementById(id) : id
        },
        byClass: function(sClass, oParent) {
            var aClass = [];
            var reClass = new RegExp("(^| )" + sClass + "( |$)");
            var aElem = this.byTagName("*", oParent);
            for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
            return aClass
        },
        byTagName: function(elem, obj) {
            return (obj || document).getElementsByTagName(elem)
        }
    };
    var dragMinWidth = 250;
    var dragMinHeight = 124;
    /*-------------------------- +
      拖拽函数
     +-------------------------- */
    function drag(oDrag, handle) {
        var disX = dixY = 0;
        var oMin = get.byClass("min", oDrag)[0];
        var oMax = get.byClass("max", oDrag)[0];
        var oRevert = get.byClass("revert", oDrag)[0];
        var oClose = get.byClass("close", oDrag)[0];
        handle = handle || oDrag;
        handle.style.cursor = "move";
        handle.onmousedown = function(event) {
            var event = event || window.event;
            disX = event.clientX - oDrag.offsetLeft;
            disY = event.clientY - oDrag.offsetTop;

            document.onmousemove = function(event) {
                var event = event || window.event;
                var iL = event.clientX - disX;
                var iT = event.clientY - disY;
                var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
                var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;

                iL <= 0 && (iL = 0);
                iT <= 0 && (iT = 0);
                iL >= maxL && (iL = maxL);
                iT >= maxT && (iT = maxT);

                oDrag.style.left = iL + "px";
                oDrag.style.top = iT + "px";

                return false
            };

            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
                this.releaseCapture && this.releaseCapture()
            };
            this.setCapture && this.setCapture();
            return false
        };
        //最大化按钮
        oMax.onclick = function() {
            oDrag.style.top = oDrag.style.left = 0;
            oDrag.style.width = document.documentElement.clientWidth - 2 + "px";
            oDrag.style.height = document.documentElement.clientHeight - 2 + "px";
            this.style.display = "none";
            oRevert.style.display = "block";
        };
        //还原按钮
        oRevert.onclick = function() {
            oDrag.style.width = dragMinWidth + "px";
            oDrag.style.height = dragMinHeight + "px";
            oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
            oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
            this.style.display = "none";
            oMax.style.display = "block";
        };
        //最小化按钮
        oMin.onclick = oClose.onclick = function() {
            oDrag.style.display = "none";
            var oA = document.createElement("a");
            oA.className = "open";
            oA.href = "javascript:;";
            oA.title = "还原";
            document.body.appendChild(oA);
            oA.onclick = function() {
                oDrag.style.display = "block";
                document.body.removeChild(this);
                this.onclick = null;
            };
        };
        //阻止冒泡
        oMin.onmousedown = oMax.onmousedown = oClose.onmousedown = function(event) {
            this.onfocus = function() {
                this.blur()
            };
            (event || window.event).cancelBubble = true
        };
    }
    /*-------------------------- +
      改变大小函数
     +-------------------------- */
    function resize(oParent, handle, isLeft, isTop, lockX, lockY) {
        handle.onmousedown = function(event) {
            var event = event || window.event;
            var disX = event.clientX - handle.offsetLeft;
            var disY = event.clientY - handle.offsetTop;
            var iParentTop = oParent.offsetTop;
            var iParentLeft = oParent.offsetLeft;
            var iParentWidth = oParent.offsetWidth;
            var iParentHeight = oParent.offsetHeight;

            document.onmousemove = function(event) {
                var event = event || window.event;

                var iL = event.clientX - disX;
                var iT = event.clientY - disY;
                var maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;
                var maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;
                var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;
                var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;

                isLeft && (oParent.style.left = iParentLeft + iL + "px");
                isTop && (oParent.style.top = iParentTop + iT + "px");

                iW < dragMinWidth && (iW = dragMinWidth);
                iW > maxW && (iW = maxW);
                lockX || (oParent.style.width = iW + "px");

                iH < dragMinHeight && (iH = dragMinHeight);
                iH > maxH && (iH = maxH);
                lockY || (oParent.style.height = iH + "px");

                if ((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove = null;

                return false;
            };
            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        }
    };
    window.onload = window.onresize = function() {
        var oDrag = document.getElementById("drag");
        var oTitle = get.byClass("title", oDrag)[0];
        var oL = get.byClass("resizeL", oDrag)[0];
        var oT = get.byClass("resizeT", oDrag)[0];
        var oR = get.byClass("resizeR", oDrag)[0];
        var oB = get.byClass("resizeB", oDrag)[0];
        var oLT = get.byClass("resizeLT", oDrag)[0];
        var oTR = get.byClass("resizeTR", oDrag)[0];
        var oBR = get.byClass("resizeBR", oDrag)[0];
        var oLB = get.byClass("resizeLB", oDrag)[0];

        drag(oDrag, oTitle);
        //四角
        resize(oDrag, oLT, true, true, false, false);
        resize(oDrag, oTR, false, true, false, false);
        resize(oDrag, oBR, false, false, false, false);
        resize(oDrag, oLB, true, false, false, false);
        //四边
        resize(oDrag, oL, true, false, false, true);
        resize(oDrag, oT, false, true, true, false);
        resize(oDrag, oR, false, false, false, true);
        resize(oDrag, oB, false, false, true, false);

        oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
        oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
    }
    </script>
</head>

<body>
    <div id="drag">
        <div class="title">
            <h2>这是一个可以拖动的窗口</h2>
            <div>
                <a class="min" href="javascript:;" title="最小化"></a>
                <a class="max" href="javascript:;" title="最大化"></a>
                <a class="revert" href="javascript:;" title="还原"></a>
                <a class="close" href="javascript:;" title="关闭"></a>
            </div>
        </div>
        <div class="resizeL"></div>
        <div class="resizeT"></div>
        <div class="resizeR"></div>
        <div class="resizeB"></div>
        <div class="resizeLT"></div>
        <div class="resizeTR"></div>
        <div class="resizeBR"></div>
        <div class="resizeLB"></div>
        <div class="content">
            ① 窗口可以拖动；
            <br /> ② 窗口可以通过八个方向改变大小；
            <br /> ③ 窗口可以最小化、最大化、还原、关闭；
            <br /> ④ 限制窗口最小宽度/高度。
        </div>
    </div>
</body>

</html>
